import React, { Component } from 'react'
import { actionCreators } from "./store";
import { connect } from 'react-redux';
import { fromJS } from 'immutable';
import { Checkbox } from 'antd-mobile'
//组件
import CartList from './Cart/CartList'
import Loading from '../../../common/load'
import TextHeader from '../../../common/header/textHeader'
import { CartPage } from './style'
//ajax
// import axios from 'axios'
import classnames from 'classnames'
class Cart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      deleteAll: false,
      loading: true,
      checkedNum: 0,
      allPrice: 0,
      cartNmu: 0,
      data: []
    }
  }
  //获取购物车列表
  getCartList(data) {

    this.setState({
      data: data,
      loading: false,
      checkedNum: 0,
      allPrice: 0,
      cartNmu: 0,

    })
  }
  //全选
  allChange(e) {
    let { shoppingCartInfo, setPrice } = this.props;
    let { data } = shoppingCartInfo;
    let checked = e.target.checked
    let newData = data.map((item, i) => {
      return {
        ...item,
        check: checked
      }
    })
    let temp = this.calc(newData);
    shoppingCartInfo = Object.assign(shoppingCartInfo, { data: newData }, temp);
    setPrice(shoppingCartInfo)
  }
  //改变库存
  changeStock(id, val) {
    let { shoppingCartInfo, setPrice } = this.props;
    let { data } = shoppingCartInfo;
    let newData = data.map((item, i) => {
      if (item.id === id) {
        return {
          ...item,
          value: val
        }
      } else {
        return item;
      }
    })
    let temp = this.calc(newData);
    shoppingCartInfo = Object.assign(shoppingCartInfo, { data: newData }, temp);
    //  console.log(1213,shoppingCartInfo)
    setPrice(shoppingCartInfo)
  }
  //点击
  checkChange(id, check) {
    let { shoppingCartInfo, setPrice } = this.props;
    let { data } = shoppingCartInfo;
    let newData = data.map((item, i) => {
      if (item.id === id) {
        return {
          ...item,
          check: check
        }
      } else {
        return item;
      }
    })

    let temp = this.calc(newData);
    shoppingCartInfo = Object.assign(shoppingCartInfo, { data: newData }, temp);
    //  console.log(1213,shoppingCartInfo)
    setPrice(shoppingCartInfo)
  }
  //计算总价
  calc(newData) {
    let allPrice = 0;
    let checkedNum = 0;
    let cartNmu = 0;
    newData.forEach((item, i) => {
      if (item.check) {
        cartNmu += 1;
        checkedNum += parseFloat(item.value);
        allPrice += parseFloat(item.value) * parseFloat(item.price)
      }
    })

    return {
      checkedNum,
      allPrice,
      cartNmu
    }
  }
  //购买
  buy() {
    console.log(this.state)
  }
  //删除购物车
  delete() {
    let { shoppingCartInfo, setPrice } = this.props;
    let { data } = shoppingCartInfo;
    let deleteData = data.filter(v => {
      return v.check === true
    })
    let restData = data.filter(v => {
      return v.check === false
    })
    let temp = this.calc(restData);
    shoppingCartInfo = Object.assign(shoppingCartInfo, { data: restData }, temp);
    setPrice(shoppingCartInfo)
    console.log(deleteData, restData)
  }
  //删除单个
  delSigle(item) {
    let { shoppingCartInfo, setPrice } = this.props;
    let { data } = shoppingCartInfo;

    let restData = data.filter(v => {
      return v.id !== item.id
    })
    let temp = this.calc(restData);
    shoppingCartInfo = Object.assign(shoppingCartInfo, { data: restData }, temp);
    setPrice(shoppingCartInfo)

  }
  //获取列表
  async getList() {
    let { shoppingCartInfo, getInitCartList } = this.props;
    console.log('1111xxx', shoppingCartInfo)
    if (shoppingCartInfo.data.length === 0) {
      await getInitCartList()

    }
  }
  //改变状态
  checkStatus() {
    let { shoppingCartInfo, setPrice } = this.props;
    shoppingCartInfo.deleteAll = !shoppingCartInfo.deleteAll;
    setPrice(shoppingCartInfo)
  }
  //装载组件
  componentDidMount() {
    this.getList()
  }
  render() {
    let { shoppingCartInfo } = this.props;
    let { data, loading, deleteAll, cartNmu, checkedNum, allPrice } = shoppingCartInfo;
    return (
      <CartPage style={{ overflow: 'hidden' }}>
        <TextHeader title="购物车" >  <span className="edit" onClick={(e) => {
          e.preventDefault();
          this.checkStatus()
        }}>
          {
            deleteAll ?
              '返回'
              :
              '编辑'
          }
        </span></TextHeader>
        <div className="cart-body">
          {
            loading ?
              <Loading />
              :
              <CartList changeStock={this.changeStock.bind(this)} delSigle={this.delSigle.bind(this)} checkChange={this.checkChange.bind(this)} data={data} ></CartList>
          }
        </div>
        {
          deleteAll ?
            <div className="cart-footer">
              <div>
                <Checkbox onChange={(e) => {
                  this.allChange(e)
                }} />
                <div>全选</div>
              </div>
              <div></div>
              <div className={classnames({
                'active': cartNmu > 0
              })} onClick={() => {
                if (cartNmu > 0) {
                  this.delete()
                }
              }}>
                删除<span>({cartNmu})</span>
              </div>
            </div>
            :
            <div className="cart-footer">
              <div>
                <Checkbox onChange={(e) => {
                  this.allChange(e)
                }} />
                <div>全选</div>
              </div>
              <div className="all-pirce">
                <p>
                  <span>总计：</span>
                  <span>￥{allPrice}</span>
                </p>
              </div>
              <div className={classnames({
                'active': checkedNum > 0
              })} onClick={() => {
                if (checkedNum > 0) {
                  this.buy()
                }
              }}>
                去结算<span>({checkedNum}件)</span>
              </div>
            </div>
        }
      </CartPage>
    )
  }
}
const mapStateToProps = (state, ownProps) => {
  state = fromJS(state);
  return {
    shoppingCartInfo: state.getIn(["shoppingCart", 'shoppingCartInfo']).toJS(),
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getInitCartList(val) {
      dispatch(actionCreators.getInitCartList(val))
    },
    setPrice(val) {
      dispatch(actionCreators.setShoppingCartList(val))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart)

